<template>
  <div class="pieCharts_wrap">
    <div class="pieCharts_main" ref="pieCharts_ref"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    top: "center",
    itemGap: 20,
    right: 20,
    itemWidth: 16, // 设置图例项宽度
    itemHeight: 16, // 设置图例项高度
    axisLabel: {
      color: "#E5F9FF",
      fontSize: 12,
      verticalAlign: "middle",
      height: 50,
      padding: [10, 100, 0, 0],
    },
    icon: "circle",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
  },
  graphic: [
    {
      type: "circle",
      zlevel: 1,
      left: "30%", // 圆心横坐标位置
      top: "center", // 圆心纵坐标位置
      radius: 400, // 圆的半径
      style: {
        fill: "#20f", // 填充颜色（无填充）
        stroke: "#2ff", // 描边颜色
        lineWidth: 2, // 描边宽度
      },
      // 如果需要，可以添加阴影效果
      shadowColor: "#900",
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
    },
    {
      type: "text",
      left: "34%",
      top: "50%",
      style: {
        text: "数据统计",
        fill: "#fff",
        textBaseline: "middle",
        textAlign: "center",
        fontSize: 20,
      },
    },
  ],
  series: [
    {
      type: "pie",
      radius: ["30%", "70%"],
      center: ["40%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "原始音频文件" },
        { value: 735, name: "处理后音频文件" },
        { value: 580, name: "图片文件" },
        { value: 484, name: "其他文件" },
      ],
    },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [
          //   {
          //     name: "水声信号数据",
          //     value: 200,
          //   },
          //   {
          //     name: "处理数据结果",
          //     value: 150,
          //   },
        ];
      },
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {
          if (val?.length) {
            this.initChartFn();
          }
        });
      },
    },
  },
  mounted() {
    this.initChartFn();
  },
  methods: {
    initChartFn() {
      if (!this.chart) {
        let dom = this.$refs.pieCharts_ref;
        this.chart = echarts.init(dom);
      }
      this.setChartOptionsFn();
    },
    setChartOptionsFn() {
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pieCharts_wrap {
  width: 100%;
  height: 100%;
  .pieCharts_main {
    width: 100%;
    height: 100%;
  }
}
</style>
